<template>
  <div class="questions-container">
    <div class="questions-header">
      <h1>情感问答</h1>
      <p>这里收集了各种感情问题和专业建议，希望能帮助你找到答案</p>
    </div>

    <div class="questions-content">
        <!-- 分类筛选 -->
        <div class="categories">
          <h2>问题分类</h2>
          <div class="category-buttons">
            <button 
              v-for="category in categories" 
              :key="category.id"
              :class="['category-btn', 'btn', { active: selectedCategory === category.id }]"
              @click="selectedCategory = category.id"
            >
              {{ category.name }}
            </button>
          </div>
        </div>

        <!-- 问题列表 -->
        <div class="questions-list">
          <div 
            v-for="question in filteredQuestions" 
            :key="question.id" 
            class="card question-card"
          >
            <div class="question-card-content">
              <div class="question-header">
                <h3>{{ question.title }}</h3>
                <span class="category-tag">{{ getCategoryName(question.categoryId) }}</span>
              </div>
              <p class="question-summary">{{ question.summary }}</p>
              <p class="question-content" v-if="expandedId !== question.id">
                {{ question.content.substring(0, 100) }}...
                <span class="read-more" @click.stop="toggleExpand(question.id)">展开</span>
              </p>
              <p class="question-content expanded" v-else>
                {{ question.content }}
                <span class="read-more" @click.stop="toggleExpand(null)">收起</span>
              </p>
              <div class="question-meta">
                <span class="advice-count">{{ question.adviceCount }} 条建议</span>
                <span class="view-count">浏览 {{ question.viewCount }}</span>
                <span class="publish-time">{{ formatDate(question.publishTime) }}</span>
              </div>
              <router-link :to="`/advice-detail/${question.id}`" class="view-advice-btn">查看专业建议</router-link>
            </div>
          </div>
        </div>
      </div>

    <!-- 分页 -->
    <div class="pagination" v-if="totalPages > 1">
      <button @click="currentPage--" :disabled="currentPage === 1" class="page-btn btn btn-secondary">上一页</button>
      <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
      <button @click="currentPage++" :disabled="currentPage === totalPages" class="page-btn btn btn-secondary">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionsView',
  data() {
    return {
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '恋爱问题' },
        { id: 2, name: '分手问题' },
        { id: 3, name: '婚姻问题' },
        { id: 4, name: '暗恋问题' },
        { id: 5, name: '友情问题' }
      ],
      selectedCategory: 0,
      expandedId: null,
      questions: [
        {
          id: 1,
          title: '如何处理分手后的痛苦？',
          summary: '我和男朋友分手已经一个月了，但还是无法走出痛苦，每天都在回忆过去的美好时光...',
          content: '我和男朋友分手已经一个月了，但还是无法走出痛苦，每天都在回忆过去的美好时光。我知道应该向前看，但情绪总是反复，有时候会突然很沮丧，有时候又觉得可以释怀。我尝试过和朋友倾诉，也试过让自己忙碌起来，但效果都不持久。我该如何真正走出这段阴霾？',
          categoryId: 2,
          adviceCount: 12,
          viewCount: 543,
          publishTime: '2024-01-15'
        },
        {
          id: 2,
          title: '恋爱中如何保持个人空间？',
          summary: '我和女友恋爱半年了，她总是希望时刻和我在一起，我感到有些窒息，该如何平衡？',
          content: '我和女友恋爱半年了，关系一直很好，但最近我感到有些压力。她希望我们几乎每天都见面，经常要求我随时汇报行踪，即使我在工作或和朋友相处时。我理解她的依赖，但我也需要自己的空间来做喜欢的事情、和朋友聚会或者独处。我担心直接沟通会让她觉得我不够爱她，但这种窒息感已经影响到我的情绪了。',
          categoryId: 1,
          adviceCount: 8,
          viewCount: 321,
          publishTime: '2024-01-18'
        },
        {
          id: 3,
          title: '如何判断对方是否真的爱你？',
          summary: '我不确定男朋友是否真的爱我，他很少表达感情，但在行动上还算关心我...',
          content: '我和男朋友在一起快一年了，但我经常怀疑他对我的感情深度。他很少说"我爱你"这样的话，也不太喜欢在公共场合表现亲密。不过，他会记得我的生理期，在我生病时照顾我，也会主动承担约会的费用。我看到身边朋友的男朋友都很浪漫，经常送花送礼物，这让我很困惑，是不是他其实没那么喜欢我？',
          categoryId: 1,
          adviceCount: 15,
          viewCount: 789,
          publishTime: '2024-01-20'
        },
        {
          id: 4,
          title: '婚姻中如何保持新鲜感？',
          summary: '结婚三年了，感觉生活越来越平淡，我们之间的话题也越来越少，该怎么办？',
          content: '我和丈夫结婚三年，现在感觉生活越来越像例行公事。每天下班后各自刷手机，周末要么在家发呆要么回父母家，很少有二人世界的活动。我们之间的话题也越来越少，除了工作和家庭琐事几乎没有其他交流。我担心这样下去会影响我们的感情，但又不知道该如何改变这种状态。',
          categoryId: 3,
          adviceCount: 10,
          viewCount: 456,
          publishTime: '2024-01-22'
        },
        {
          id: 5,
          title: '喜欢上了最好的朋友，该表白吗？',
          summary: '我暗恋了最好的朋友很久，但害怕表白后连朋友都做不成，我该怎么办？',
          content: '我有一个认识十年的异性好友，最近两年我发现自己对他的感情已经超出了友谊。我们几乎无话不谈，彼此都很了解对方，但我一直不敢表白，害怕如果被拒绝，连朋友都做不成。每次看到他和其他异性在一起我都会感到失落，但又不知道该如何处理这种复杂的感情。',
          categoryId: 4,
          adviceCount: 23,
          viewCount: 876,
          publishTime: '2024-01-25'
        },
        {
          id: 6,
          title: '如何处理婆媳关系？',
          summary: '我和婆婆的生活习惯差异很大，经常因为一些小事发生矛盾，影响了家庭和谐...',
          content: '结婚后我和婆婆住在一起，一开始觉得挺好的，但时间久了发现我们的生活习惯和价值观差异很大。她总是干涉我们的生活，比如擅自整理我们的房间，对我的消费习惯指手画脚，还经常在我丈夫面前说我的不是。我尝试过沟通，但每次都会变成争吵。我丈夫夹在中间也很为难，这已经影响到我们的夫妻关系了。',
          categoryId: 3,
          adviceCount: 18,
          viewCount: 654,
          publishTime: '2024-01-28'
        },
        {
          id: 7,
          title: '异地恋真的能长久吗？',
          summary: '我和男友异地恋两年了，最近因为见面次数少而经常吵架，我们还能继续下去吗？',
          content: '我和男友是大学同学，毕业后因为工作原因开始异地恋，至今已经两年了。一开始我们每天都会视频聊天，节假日也会尽量见面，但最近半年因为工作都很忙，见面次数减少，视频聊天的时间也越来越短。我们开始因为一些小事吵架，他总说我不理解他的辛苦，我则觉得他不够关心我。我很珍惜这段感情，但不知道异地恋是否真的能长久。',
          categoryId: 1,
          adviceCount: 20,
          viewCount: 921,
          publishTime: '2024-02-01'
        },
        {
          id: 8,
          title: '被分手后如何重新开始？',
          summary: '被前女友劈腿分手后，我对感情失去了信心，不知道该如何重新开始新的恋情...',
          content: '三个月前，我发现交往两年的女友背叛了我，和我的一个朋友在一起了。这件事对我打击很大，我开始怀疑自己的价值，也对爱情失去了信心。现在我尽量避免社交场合，害怕遇到他们，也害怕开始新的感情。朋友们都劝我走出来，但我真的不知道该如何重新信任别人，如何开始新的生活。',
          categoryId: 2,
          adviceCount: 17,
          viewCount: 756,
          publishTime: '2024-02-03'
        },
        {
          id: 9,
          title: '如何处理家庭反对的恋情？',
          summary: '我和男友感情很好，但家人因为他的家庭条件反对我们在一起，我该怎么办？',
          content: '我和男友恋爱一年了，我们感情很好，彼此都认定对方是想要共度一生的人。但当我向父母介绍他时，他们却因为他的家庭条件不好而强烈反对。我父母认为他没有稳定的工作，家庭经济状况也不好，担心我嫁给他会受苦。无论我怎么解释他的潜力和我们的感情，父母都不为所动，甚至威胁说如果我坚持和他在一起，他们就和我断绝关系。',
          categoryId: 1,
          adviceCount: 14,
          viewCount: 634,
          publishTime: '2024-02-05'
        },
        {
          id: 10,
          title: '再婚需要注意什么？',
          summary: '我离异后准备再婚，但担心会重蹈覆辙，再婚时应该注意哪些问题？',
          content: '我三年前离婚，现在交往了一个男朋友，我们计划明年结婚。这次的感情很稳定，但我心里总是有阴影，担心会重复上一段婚姻的失败。我有一个8岁的女儿，她对新爸爸的接受度还不错，但我担心婚后的家庭关系会变得复杂。我想知道再婚需要特别注意哪些问题，如何避免过去的错误。',
          categoryId: 3,
          adviceCount: 11,
          viewCount: 512,
          publishTime: '2024-02-07'
        },
        {
          id: 11,
          title: '如何向暗恋的人表白？',
          summary: '我暗恋一个同事很久了，但不知道该如何开口，担心被拒绝后关系会变得尴尬...',
          content: '我在公司暗恋一个同事已经半年了，我们在同一个部门工作，平时接触比较多。我觉得他对我也有好感，会主动帮我分担工作，也会在休息时间找我聊天。但我不确定他到底是把我当普通同事还是也有别的想法。我很想向他表白，但又害怕被拒绝后在同一个办公室会很尴尬，不知道该如何是好。',
          categoryId: 4,
          adviceCount: 25,
          viewCount: 1034,
          publishTime: '2024-02-10'
        },
        {
          id: 12,
          title: '如何处理父母过度干涉感情？',
          summary: '父母总是对我的恋爱对象不满意，经常在我们之间制造矛盾，我该如何处理？',
          content: '我今年28岁，有一个交往一年的男朋友，但我的父母一直对他不满意。他们觉得他不够优秀，总是挑他的毛病，还经常安排我去相亲。每次我带男朋友回家，父母都会冷着脸，弄得气氛很尴尬。我尝试过和父母沟通，但他们总是说"我们是为你好"，坚持要我找一个他们认为合适的人。我很爱我的男朋友，但也不想和父母闹翻。',
          categoryId: 3,
          adviceCount: 13,
          viewCount: 678,
          publishTime: '2024-02-12'
        },
        {
          id: 13,
          title: '忘不掉前任怎么办？',
          summary: '分手已经半年了，但我还是经常想起前任，无法全身心投入到新的感情中...',
          content: '和前任分手已经半年了，但我还是经常想起他，尤其是在一些特定的场景或时间点。我尝试过开始新的恋情，但总是不自觉地拿现任和前任比较，发现现任身上缺少前任的一些特质。我知道这样对现任不公平，也不利于开始新的生活，但就是无法控制自己的思绪。我该如何真正放下过去？',
          categoryId: 2,
          adviceCount: 19,
          viewCount: 845,
          publishTime: '2024-02-15'
        },
        {
          id: 14,
          title: '如何应对恋爱中的不安全感？',
          summary: '我总是担心男友会离开我，经常因为小事而怀疑他对我的感情，这让我很痛苦...',
          content: '我在恋爱中总是很没有安全感，经常查看男友的手机，他回复消息慢了我就会胡思乱想，担心他是不是不在乎我了或者有了别人。我知道这种行为不好，但就是控制不住自己的猜忌和怀疑。男友说我太敏感了，这让他感到压力很大。我也不想这样，但每次都会被负面情绪控制，我该如何建立健康的恋爱安全感？',
          categoryId: 1,
          adviceCount: 16,
          viewCount: 723,
          publishTime: '2024-02-18'
        },
        {
          id: 15,
          title: '如何处理兄弟姐妹间的感情矛盾？',
          summary: '我和妹妹因为一个男孩产生了矛盾，亲情和爱情让我左右为难，该怎么办？',
          content: '我和妹妹从小感情很好，但最近因为一个男孩的事情我们的关系变得很僵。这个男孩是我先认识并暗恋的，但妹妹后来也喜欢上了他，现在他们正在交往。我虽然表面上祝福他们，但内心还是很痛苦，看到他们在一起就会想起自己的遗憾。我们之间的交流越来越少，家庭聚会也变得很尴尬。我不知道该如何面对这种复杂的感情。',
          categoryId: 5,
          adviceCount: 9,
          viewCount: 432,
          publishTime: '2024-02-20'
        }
      ],
      currentPage: 1,
      itemsPerPage: 3
    }
  },
  computed: {
    filteredQuestions() {
      let filtered = this.questions
      if (this.selectedCategory !== 0) {
        filtered = filtered.filter(q => q.categoryId === this.selectedCategory)
      }
      return filtered.slice(
        (this.currentPage - 1) * this.itemsPerPage,
        this.currentPage * this.itemsPerPage
      )
    },
    totalPages() {
      let totalItems = this.questions.length
      if (this.selectedCategory !== 0) {
        totalItems = this.questions.filter(q => q.categoryId === this.selectedCategory).length
      }
      return Math.ceil(totalItems / this.itemsPerPage)
    }
  },
  methods: {
    getCategoryName(categoryId) {
      const category = this.categories.find(cat => cat.id === categoryId)
      return category ? category.name : '未分类'
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) {
        return '今天'
      } else if (days === 1) {
        return '昨天'
      } else if (days < 7) {
        return `${days} 天前`
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    },
    toggleExpand(id) {
      this.expandedId = id
    }
  }
}
</script>

<style scoped>
.questions-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.questions-header {
  text-align: center;
  margin-bottom: 3rem;
}

.questions-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.questions-header p {
  color: #666;
  font-size: 1.1rem;
}

.questions-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
}

.categories {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: fit-content;
  position: sticky;
  top: 80px;
}

.categories h2 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.category-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.category-btn {
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.category-btn:hover {
  background-color: #f8f9fa;
  border-color: #ff9a9e;
}

.category-btn.active {
  background-color: #ff9a9e;
  color: #fff;
  border-color: #ff9a9e;
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.question-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      background-color: #fff;
    }

    .question-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .question-card-content {
      padding: 20px;
    }

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .question-header h3 {
      margin: 0;
      color: #333;
      font-size: 18px;
      flex: 1;
      margin-right: 1rem;
    }

    .category-tag {
      background-color: #ff9a9e;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
    }

    .question-summary {
      color: #666;
      margin-bottom: 15px;
      line-height: 1.6;
    }

    .question-content {
      color: #777;
      line-height: 1.6;
      margin-bottom: 15px;
      font-size: 14px;
    }

    .question-content.expanded {
      color: #555;
    }

    .read-more {
      color: #ff9a9e;
      cursor: pointer;
      font-weight: 500;
      margin-left: 5px;
    }

    .read-more:hover {
      text-decoration: underline;
    }

    .question-meta {
      display: flex;
      gap: 15px;
      color: #999;
      font-size: 14px;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .advice-count {
      color: #ff9a9e;
      font-weight: 500;
    }

    .view-advice-btn {
      display: inline-block;
      background-color: #ff9a9e;
      color: white;
      padding: 8px 16px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 14px;
      transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .view-advice-btn:hover {
      background-color: #ff7a7e;
      transform: translateY(-1px);
    }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  width: 100%;
  max-width: 1200px;
}

.page-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background-color: #ff9a9e;
  color: #fff;
  border-color: #ff9a9e;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #666;
}

@media (max-width: 992px) {
  .questions-content {
    grid-template-columns: 1fr;
  }
  
  .categories {
    position: static;
    width: 100%;
  }
  
  .category-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .category-btn {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .questions-container {
    padding: 1rem;
  }
  
  .questions-header h1 {
    font-size: 2rem;
  }
  
  .question-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .question-category {
    margin-top: 0.5rem;
  }
  
  .question-meta {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .pagination {
    gap: 1rem;
  }
  
  .page-btn {
    padding: 0.5rem 1rem;
  }
}
</style>